<template>
    <div id="trades">
        <label for="">股票：</label>
        <el-select v-model="checkTrade" class="m-2" placeholder="Select" size="large" @change="checkCode">
            <el-option v-for="trade in trades" :key="trade.code" :label="trade.name" :value="trade.code" />
        </el-select>
        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="YYYY/MM/DD" @change="checkDate" style="height: 40px;margin-left: 20px;line-height: 40px">
        </el-date-picker>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'trades',
    data() {
        return {
            trades: undefined,
            checkTrade: undefined,
            checkedCode: undefined,
            value1: undefined,
            dates: []
        }
    },
    methods: {
        initData() {
            axios({
                method: 'GET',
                url: '/api/signal/getAllTrades',

            }).then(res => {
                if (res.data.code === 1) {
                    this.trades = res.data.result
                    this.checkTrade = this.trades[0].name
                }
            }).catch(err => {
                console.log(err);
            })
        },
        checkCode() {
            this.checkedCode = arguments[0]
            this.$emit('changeCode', this.checkedCode)
        },
        checkDate() {
            this.$emit('changeDate', {start: arguments[0][0], end: arguments[0][1]})
        }
    },
    mounted() {
        this.initData()

    }
}
</script>
<style scoped>
#trades {
    background-color: aliceblue;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    padding: 20px 0;
    line-height: 1.5rem;
}

</style>